<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="head">
        <style type="text/css">
            .ui-analog-clock {
                width: 200px;
            }
        </style>  
    </ui:define>
    
    <ui:define name="title">
        Clock
    </ui:define>

    <ui:define name="description">
        Clock displays server or client datetime live. AutoSync feature in server mode can sync the 
        clock with server periodically.
    </ui:define>

    <ui:param name="documentationLink" value="/components/clock" />

    <ui:define name="implementation">

        <h:form>
            <h3 style="margin-top:0">Client</h3>
            <p:clock />

            <h3>Server</h3>
            <p:clock pattern="HH:mm:ss dd.MM.yyyy" mode="server" />
               
            <h3>Analog</h3>
            <p:clock displayMode="analog" />
        </h:form>
        
    </ui:define>

</ui:composition>